<template>
  <div>
    <Card dis-hover>
      <Row style="margin-bottom: 10px;">
        <Col span="24" style="text-align: right;">
          <Button @click="prevStep" type="success" style="margin-right: 10px;" :disabled="current===0">
            <Icon type="ios-arrow-back"></Icon>
            上一步
          </Button>
          <Button @click="nextStep(current)" type="success" style="margin-right: 10px;" :disabled="current===1">下一步
            <Icon type="ios-arrow-forward"></Icon>
          </Button>
          <Button @click="save" icon="md-time" type="primary" :disabled="current!==1">保存</Button>
        </Col>
      </Row>
      <Steps :current="current" style="margin-top:20px;margin-bottom:20px;">
        <Step title="基本信息"></Step>
        <Step title="设计表单"></Step>
      </Steps>

      <Card dis-hover v-show="current===0" style="height: calc(100vh - 272px);">
        <Form ref="schemeForm0" :model="scheme" label-position="top" :rules="schemeRule0">
          <FormItem label="表单模板名称" prop="schemeName">
            <Input v-model="scheme.schemeName" clearable maxlength="512" placeholder=""></Input>
          </FormItem>
          <FormItem label="表单类型" prop="formType">
            <Select v-model="scheme.formType" clearable placeholder="选择表单类型" transfer>
              <Option :key="0" label="用户设计" :value="0"></Option>
              <Option :key="1" label="系统内置" :value="1"></Option>
            </Select>
          </FormItem>
          <FormItem label="表单模板描述" prop="description">
            <Input v-model="scheme.description" type="textarea" :rows="4" clearable placeholder=""></Input>
          </FormItem>
        </Form>
      </Card>
      <form-design ref="designer" v-show="current===1" v-if="scheme.formType===0"></form-design>
      <Card dis-hover v-show="current===1" v-if="scheme.formType===1" style="height: calc(100vh - 272px);">
        <Form ref="schemeForm" :model="scheme" label-position="top" :rules="schemeRule1">
          <FormItem label="系统内置表单" prop="schemeContent">
            <Select v-model="scheme.schemeContent" clearable placeholder="选择系统内置表单" transfer>
              <Option :key="0" value="BuiltInSample">内建表单样例</Option>
            </Select>
          </FormItem>
        </Form>
        <Divider />
        <component :is="scheme.schemeContent" :disabled="true" :data="{}" v-if="scheme.schemeContent!=='' && scheme.formType===1"></component>
      </Card>
    </Card>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import Util from '@/lib/util';
import FormScheme from '@/store/entities/form/form-scheme/form-scheme';


@Component({
  components: {},
})
export default class FormSchemeUpdate extends AbpBase {
  name: string = 'FormSchemeUpdate';
  current: number = 0;
  scheme: FormScheme = new FormScheme();
  schemeRule0 = {

    schemeName: [
      {
        required: true,
        message: '表单模板名称是必须的',
        trigger: 'blur,change',
      },
    ],
    formType: [
      {
        required: true,
        message: '表单类型是必须的',
        trigger: 'change',
        type: 'number',
      },
    ],
  };
  schemeRule1 = {
    schemeContent: [
      {
        required: true,
        message: '系统内置表单是必须的',
        trigger: 'change',
        type: 'string',
      },
    ],
  };


  prevStep() {
    this.current--;
  }

  nextStep(step: number) {
    if (step === 0) {
      (this.$refs.schemeForm0 as any).validate(async (valid: boolean) => {
        if (valid) {
          this.current++;
          if(this.scheme.formType===0){
            (this.$refs.designer as any).initModel(JSON.parse(this.scheme.schemeContent));
          }
        }
      });
    }

  }

  async save() {
    if (this.scheme.formType === 0) {
      if((this.$refs.designer as any).data.list.length>0) {
        this.scheme.schemeContent = JSON.stringify((this.$refs.designer as any).getModel());
        await this.$store.dispatch({
          type: 'formScheme/createOrUpdateFormScheme',
          data: {
            formScheme: this.scheme,
          }
        });
        Util.closePage(this, 'form-scheme-update');
        this.$router.push({name: 'form-scheme'});

        this.$Message.success({
          background: true,
          content: '表单模板 ' + this.scheme.schemeName + ' 更新成功',
        });
      }else{
        this.$Message.error({background:true,content:'模板至少需要一个组件',duration: this.$config.duration,});
      }
    }
    if (this.scheme.formType === 1) {
      (this.$refs.schemeForm as any).validate(async (valid: boolean) => {
        if (valid) {
          await this.$store.dispatch({
            type: 'formScheme/createOrUpdateFormScheme',
            data: {
              formScheme: this.scheme,
            }
          });
          Util.closePage(this, 'form-scheme-update');
          this.$router.push({name: 'form-scheme'});

          this.$Message.success({
            background: true,
            content: '表单模板 ' + this.scheme.schemeName + ' 更新成功',
          });
        }
      });
    }
  }

  @Watch('$store.state.formScheme.formSchemeForEdit')
  change() {
    this.scheme = this.$store.state.formScheme.formSchemeForEdit.formScheme;
  }


  async created() {

    await this.$store.dispatch({
      type: 'formScheme/getFormSchemeForEdit',
      data: {
        id: this.$route.params.id,
      },
    });
  }

  beforeDestroy() {

    if (this.$refs.designer) {
      (this.$refs.designer as any).data.list = [];
    }
  }
}
</script>

<style lang="less" scoped>

</style>
